<template>
  <div class="sudoku-login">
    <div class="login-header">
      <h2>欢迎,<br />请登录以开始您的数独游戏...</h2>
    </div>
    <div class="login-mode-group">
      <RadioGroup v-model="loginMode" type="button">
        <Radio label="login">Login</Radio>
        <Radio label="register">Register</Radio>
      </RadioGroup>
    </div>
    <div class="form-pane">
      <transition name="pane-fade" mode="out-in">
        <component :is="curPane"></component>
      </transition>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from '@/plugins/class-component-hooks'
import RegisterForm from '@/components/RegisterForm.vue'
import LoginForm from '@/components/LoginForm.vue'

enum LoginModeType {
  LOGIN = 'login',
  REGISTER = 'register'
}

@Component({
  components: {
    RegisterForm,
    LoginForm
  }
})
export default class LoginCommonView extends Vue {
  private loginMode: LoginModeType = LoginModeType.LOGIN

  get curPane() {
    return this.loginMode == LoginModeType.LOGIN ? 'LoginForm' : 'RegisterForm'
  }
}
</script>

<style lang="scss" scoped>
.sudoku-login {
  .form-pane {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

.login-header {
  margin-bottom: 2rem;
}

.login-mode-group {
  margin-bottom: 2rem;
}

.pane-fade-enter-active,
.pane-fade-leave-active {
  transition: opacity 0.3s ease;
}
.pane-fade-enter,
.pane-fade-leave-to {
  opacity: 0;
}
</style>
